<template>
  <el-breadcrumb :separator-icon="ArrowRight">
    <el-breadcrumb-item :to="{ path: '/' }">12306后台</el-breadcrumb-item>
    <el-breadcrumb-item :key="'bc' + index" v-for="(item, index) in getCrmbreadcrumbByPageName">{{
      item
    }}</el-breadcrumb-item>
  </el-breadcrumb>
  <router-view></router-view>
</template>

<script lang="ts" setup>
import { ArrowRight } from '@element-plus/icons-vue'
import { storeToRefs } from 'pinia'
// 使用路由
// 路由数据是响应式的

import { useMenuStore } from '../../stores/menu'
const menuStroe = useMenuStore()
// 在Pinia中使用路径
const { getCrmbreadcrumbByPageName } = storeToRefs(menuStroe)
</script>

<style lang="scss" scoped>
.el-breadcrumb {
  margin: 16px;
  // overflow: hidden;
}
.el-breadcrumb-item {
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
    'Segoe UI Symbol', 'Noto Color Emoji';
}
</style>
